<template>
  <div>
    <div class="demo-inner-divider">背景色提示</div>
    <e-button @click="showAllMessageWithBackground">提醒</e-button>

    <div class="demo-inner-divider">普通全局提示</div>
    <e-button @click="info">提示</e-button>
    <e-button @click="warning">警告</e-button>
    <e-button @click="success">成功</e-button>
    <e-button @click="error">错误</e-button>
    <e-button @click="help">帮助说明</e-button>

    <div class="demo-inner-divider">深色底的全局提示</div>
    <e-button @click="darkInfo">提示</e-button>
    <e-button @click="darkWarning">警告</e-button>
    <e-button @click="darkSuccess">成功</e-button>
    <e-button @click="darkError">错误</e-button>
    <e-button @click="darkHelp">帮助说明</e-button>

    <div class="demo-inner-divider">带关闭的全局提示</div>
    <e-button @click="closable">显示可关闭弹框</e-button>

    <div class="demo-inner-divider">loading</div>
    <e-button @click="loading">loading加载</e-button>

    <div class="demo-inner-divider">自定义渲染函数</div>
    <e-button @click="onRender">渲染函数</e-button>
  
    <read-me class="markdown-body"></read-me>
  </div>
</template>

<script>
import ReadMe from '../../docs/message.md';
export default {
  components: { ReadMe },

  methods: {
    showAllMessageWithBackground () {
      this.$Message.info({
        content: '这是一条普通的提示',
        duration: 0,
        background: true
      });
      this.$Message.success({
        content: '这是一条成功提示',
        duration: 0,
        background: true
      });
      this.$Message.warning({
        content: '这是一条警告提示',
        duration: 0,
        background: true
      });
      this.$Message.error({
        content: '这是一条错误提示',
        duration: 0,
        background: true
      });
    },
    info () {
      // this.$Message.info('这是代表提示的全局提示，用于普通的操作反馈');
      this.$Message.info({
        content: '这是代表提示的全局提示，用于普通的操作反馈',
        duration: 0,
      });
    },
    success () {
      // this.$Message.success('这是代表成功的全局提示，用于操作成功的反馈');
      this.$Message.success({
        content: '这是代表提示的全局提示，用于普通的操作反馈',
        duration: 0,
      });
    },
    warning () {
      // this.$Message.warning('这是代表警示的全局提示，用于需要警示的操作反馈');
      this.$Message.warning({
        content: '这是代表提示的全局提示，用于普通的操作反馈',
        duration: 0,
      });
    },
    error () {
      // this.$Message.error('这是代表失败的全局提示，用于操作失败的反馈');
      this.$Message.error({
        content: '这是代表提示的全局提示，用于普通的操作反馈',
        duration: 0,
      });
    },
    help () {
      // this.$Message.help('这是代表帮助说明的全局提示，用于解释说明');
      this.$Message.help({
        content: '这是代表提示的全局提示，用于普通的操作反馈',
        duration: 0,
      });
    },
    darkInfo () {
      this.$Message.info({
        content: '这是代表提示的全局提示，用于普通的操作反馈',
        duration: 0,
        dark: true
      });
    },
    darkSuccess () {
      this.$Message.success({
        content: '这是代表成功的全局提示，用于操作成功的反馈',
        duration: 0,
        dark: true
      });
    },
    darkWarning () {
      this.$Message.warning({
        content:'这是代表警示的全局提示，用于需要警示的操作反馈',
        duration: 0,
        dark: true
      });
    },
    darkError () {
      this.$Message.error({
        content: '这是代表失败的全局提示，用于操作失败的反馈',
        duration: 0,
        dark: true
      });
    },
    darkHelp () {
      this.$Message.help({
        content: '这是代表帮助说明的全局提示，用于解释说明',
        duration: 0,
        dark: true
      });
    },
    loading () {
      const msg = this.$Message.loading({
        content: '加载中...',
        duration: 0,
        dark: true
      });
      // setTimeout(msg, 3000);
    },
    closable () {
      this.$Message.info({
        content: '这是代表提示的全局提示，用于普通的操作反馈',
        duration: 0,
        closable: true,
        dark: true
      });
    },
    onRender(){
      this.$Message.info({
        content: '全局提示，',
        closable: true,
        render: h => {
          return h('span', [
            '这是render函数渲染结果',
            h('a',{href:'http://www.baidu.com',target:'_blank'},'百度'),
          ])
        },
        onClose: () => {
          console.log("我被关闭了！！！")
        },
        duration: 0,
        dark: true
      })
    }
  }
}
</script>

<style scoped>
button {
  margin-right: 10px;
}
</style>
